<template>
	<view class="container">
		<view class="hr-class"></view>
		<view class="intext">
			<img src="/static/上一页图标 .png" alt="" style="width: 35px; height: 35px; margin-left: 10px; margin-top: 10px;"
				@click="returo" />
			<uni-search-bar placeholder="请输入商品" bgColor="#f1f1f1" @confirm="search" class="inp" radius="100" />
		</view>

		<view class="left">
			<scroll-view scroll-y="true" style="height: 800px;" :show-scrollbar="scrollbar">
				<uni-list v-for="(items,index) in liftItem" :key="items.classId" :index="index">
					<uni-list-item :title="items.className" clickable @click="dan(items.classId)"></uni-list-item>
				</uni-list>
			</scroll-view>
		</view>

		<view class="right">
			<scroll-view scroll-y="true" class="right-scroll" style="height: 800px;">
				<view v-for="(item, index) in rigthItem" :index="index" :key="item.classId" class="rigth"
					style="background-color: #fff;">
					<uni-section :title="item.className" type="line" padding>
						<uni-grid :column="3" :highlight="true" :showBorder="showBorder" class="uni-grid-right"
							style="background-color: #fff;">
							<uni-grid-item v-for="( items, index2 ) in throwTree" :index="index2" :key="index2"
								v-if="item.classId==items.classLevel">
								<view v-if="items.classId==items.classLevel" class="grid-item-box"
									style="background-color: #fff;">
									<image :src="items.classImager" mode="" class="imk"></image>
								</view>
								<text class="text">{{items.className}}</text>
							</uni-grid-item>
						</uni-grid>
					</uni-section>
				</view>
			</scroll-view>
		</view>


	</view>
</template>

<script scoped>
	import {
		name,
		getcategory,
		getclassThire
	} from "../appjs/categoryJs/appcategory.js"
	export default {
		data() {
			return {
				liftItem: [],
				rigthItem: [],
				throwTree: [],
				index: '',
				scrollbar: true,
				showBorder: false,
				selectCategoryId: undefined,
				dataID: 1,
			}
		},
		onLoad() {
			this.jiazai();
			this.dan(this.dataID);

		},
		methods: {
			dan(item) {
				this.selectCategoryId = item;
				this.getclassThire(this.selectCategoryId);
			},
			jiazai() {
				let thaw = this;
				getcategory().then(function(data) {
					thaw.liftItem = data.data
				});
				thaw.getclassThire(thaw.selectCategoryId);
			},
			getclassThire(classLevel) {
				let thaw = this;
				getclassThire(classLevel).then(function(data) {
					thaw.rigthItem = data.data.listBooks;
					thaw.throwTree = data.data.treeList
				});
			},
			getClassTree(source) {
				for (var i = 0; i < source.length; i++) {
					let id = source[i].classId;
					if (!source[i].children) {
						source[i].children = [];
					}
					for (var x = 0; x < source.length; x++) {
						if (id == source[x].classLevel) {
							source[i].children.push(source[x])
						}
					}
				}
				return source;
			},


			returo() {
				uni.switchTab({
					url: "/pages/index/index",
					success() {
						console.log("成功")
					},
					fail() {
						uni.showToast({
							title: "返回上一页失败"
						})
					}
				})
			},
		},

	}
</script>

<style>
	.hr-class {
		border: 1px solid #ff0000;
		width: 300;
	}

	.uni-grid-right {
		margin-left: 30px;
	}

	.left {
		width: 20% !important;
		float: left !important;

	}

	.right {
		width: 80% !important;
		float: right !important;


	}

	.imk {
		width: 135rpx !important;
		height: 135rpx !important;

	}

	.text {
		font-size: 14px !important;
		margin-top: 5px !important;
	}

	.intext {
		padding-top: 0px !important;
		display: flex !important;
		top: 0 !important;
		left: 0px !important;
		height: 50px;
		z-index: 999 !important;
		width: 100% !important;
		background-color: #fff;
	}

	.inp {
		padding-left: 10px !important;
		padding-top: 0px !important;
		width: 100% !important;
	}
</style>